iT邦幫忙

2024 iThome 鐵人賽

DAY 20
0
Mobile Development

IOS的打怪升級之路系列 第 20

鐵人賽第二十天 留言板(六)tableview的左滑功能(編輯)

  • 分享至 

  • xImage
  •  

說明

這篇文章將介紹如何在 UITableView中實作左滑編輯功能。當使用者左滑一列時,可以顯示「編輯」按鈕,讓使用者能夠快速進入編輯模式,對資料進行修改。/images/emoticon/emoticon08.gif

實作

UITableView 中,我們使用 leadingSwipeActionsConfigurationForRowAt 方法來定義當使用者向右滑動一列時顯示的動作按鈕,這裡我們實作了「編輯」操作。

左滑編輯功能程式碼:

func tableView(_ tableView: UITableView,
                   leadingSwipeActionsConfigurationForRowAt indexPath: IndexPath) -> UISwipeActionsConfiguration? {
        
        // 創建 "編輯" 功能
        let editAction = UIContextualAction(style: .normal, title: "編輯") { (_, _, completionHandler) in
            
            // 設定編輯狀態
            self.isedit = true
            self.editrow = indexPath.row
            
            // 觸發編輯的操作
            self.send() //下一篇文章將會講解這個函數的實作
            
            // 完成操作
            completionHandler(true)
        }
        
        // 設定編輯操作的背景顏色
        editAction.backgroundColor = UIColor.blue
        
        // 返回設定好的配置
        return UISwipeActionsConfiguration(actions: [editAction])
    }

重要步驟:

  1. 創建編輯操作:
    使用 UIContextualAction 創建一個 "編輯" 功能。當使用者點擊這個按鈕時,將進入編輯模式。

  2. 設置編輯狀態:
    isedit 設為 true,表示目前處於編輯狀態,並記錄當前編輯的行數 editrow。

  3. 觸發編輯方法:
    呼叫 self.send() 方法來進入編輯畫面或執行任何需要的編輯邏輯。(下一篇文章將會講解這個函數的實作)

  4. 完成操作:
    使用 completionHandler(true) 來告知系統該操作已成功完成,這樣滑動的按鈕才能正常隱藏。

結語

這段程式碼實作了左滑編輯功能,使用者能夠快速進入編輯狀態並修改資料。這樣的設計提升了使用者的操作便捷性。/images/emoticon/emoticon69.gif


上一篇
鐵人賽第十九天 留言板(五)tableview的右滑功能
下一篇
鐵人賽第二十一天 留言板(七)送出留言的功能製作 (完成留言板)
系列文
IOS的打怪升級之路30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言